<template>
	<view class="container">
		<!-- 头像上传 -->
		<view class="avatar-box" @click="handleAvatarChange">
			<image class="avatar" :src="form.avatar" mode="aspectFill"></image>
			<view class="edit-tip">点击修改头像</view>
		</view>

		<!-- 昵称输入 -->
		<view class="input-box">
			<text class="label">昵称</text>
			<input class="input" v-model="form.nickname" placeholder="请输入2-12位昵称" placeholder-class="placeholder"
				maxlength="12" @input="handleNicknameInput" />
			<text class="word-count">{{ form.nickname.length }}/12</text>
		</view>

		<!-- 保存按钮 -->
		<button class="save-btn" :class="{ disabled: !canSubmit }" :disabled="!canSubmit" @click="handleSave">
			{{ isSaving ? '保存中...' : '保存修改' }}
		</button>
	</view>
</template>

<script>
	import api from '../../api/Channel.js'
	import commonMixin from '@/mixins/qiLiuyun.js';
	import request from '../../api/index.js'
	import suffixAddress from '../../api/suffixAddress.js'
	export default {
		mixins: [commonMixin],
		data() {
			return {
				isSaving: false,
				originalData: {},
				form: {
					avatar: '',
					nickname: '',
					key: null
				}
			}
		},
		computed: {
			canSubmit() {
				return (
					!this.isSaving &&
					this.form.nickname.length >= 2 &&
					(this.form.nickname !== this.originalData.nickname ||
						this.form.avatar !== this.originalData.avatar)
				)
			}
		},
		onLoad() {
			this.loadUserData()
		},
		methods: {
			async loadUserData() {
				let obj = {
					url: api.Channel + suffixAddress.add().info
				}
				let res = await request(obj)
				console.log(res)
				console.log(res.data.avatar.url)
				this.form.avatar = res.data.avatar.url
				this.form.nickname = res.data.name
				this.form.key = res.data.avatar.key
			},
			async handleAvatarChange() {
				try {
					const res = await uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: ['album', 'camera']
					})
					this.form.avatar = res[1].tempFilePaths[0]
					this.form.key = await this.Tokenqiniu(res[1].tempFilePaths[0], 'user-avatar')
				} catch (error) {
					console.log(error)
					
				}
			},
			handleNicknameInput(e) {
				this.form.nickname = e.detail.value.slice(0, 12)
			},
			async handleSave() {
				if (!this.canSubmit) return
				this.isSaving = true
				let obj = {
					url: api.Channel + suffixAddress.add().info,
					method: 'POST',
					data: {
						avatar: this.form.key,
						nickname: this.form.nickname
					}
				}
				let res = await request(obj)
				if (res.message == "SUCCESS") {
					this.isSaving = false
					uni.showToast({
						title: '更新成功',
						icon: 'success',
						duration: 1000,
						success() {
							uni.setStorageSync('userxinxi', 1);
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/user/user'
								});
							}, 1300);
						}
					});

				} else {
					this.isSaving = false
					uni.showToast({
						title: '更新失败',
						icon: 'error',
						duration: 2000
					});
				}
				console.log(res)
			},
			showToast(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 40rpx;
		min-height: 100vh;
		background: #f8f8f8;
	}

	.avatar-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 60rpx 0 80rpx;

		.avatar {
			width: 240rpx;
			height: 240rpx;
			border-radius: 50%;
			border: 6rpx solid #fff;
			box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
			background: #eee;
		}

		.edit-tip {
			margin-top: 24rpx;
			font-size: 28rpx;
			color: #666;
		}
	}

	.input-box {
		position: relative;
		background: #fff;
		padding: 32rpx;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.label {
			font-size: 32rpx;
			color: #333;
			margin-bottom: 20rpx;
			display: block;
		}

		.input {
			height: 88rpx;
			font-size: 32rpx;
			color: #333;
			padding-right: 140rpx;
		}

		.word-count {
			position: absolute;
			right: 32rpx;
			bottom: 32rpx;
			font-size: 24rpx;
			color: #999;
		}
	}

	.placeholder {
		color: #ccc;
	}

	.save-btn {
		margin-top: 80rpx;
		height: 96rpx;
		line-height: 96rpx;
		background: linear-gradient(135deg, #00c853, #009624);
		color: #fff;
		border-radius: 48rpx;
		font-size: 34rpx;
		transition: all 0.3s;

		&.disabled {
			opacity: 0.7;
			background: #ddd;
		}

		&::after {
			border: none;
		}
	}
</style>